<template>
	<!-- 立即付款 -->
	<view class="main">
		<view class="payment_main">
			<view class="shopping_cart">
				<view class="shopping_cart_commodity_info">
					<view class="commodity_image">
						<image :src="'http://gy.hyq.ink/' + orderDetails.info.image" mode=""></image>
					</view>
					<view class="commodity_synopsis">
						<view class="commodity_title">
							{{orderDetails.info.goods_name}}
						</view>
						<view class="shopping_cart_timer_money">
							<view class="shopping_cart_money">
								{{orderDetails.info.price}}
							</view>
						</view>
					</view>
				</view>
				<view class="shopping_cart_btn">
					<view class="cancel_order" @click="handleShowDelDialog()">
						<image src="@/static/image/cancelOrder.png" mode=""></image>取消订单
					</view>
				</view>
			</view>
			<view class="personal_info boxshow">
				<view class="back_info_title">
					银行账户
				</view>
				<ul class="back_info_center">
					<li><view><text>开</text><text>户</text><text>行:</text></view><text>{{orderDetails.pay_info.opening_bank}}</text></li>
					<li><view><text>账</text><text>号:</text></view><text>{{orderDetails.pay_info.credit_card}}</text></li>
					<li><view><text>姓</text><text>名:</text></view><text>{{orderDetails.pay_info.name}}</text></li>
				</ul>
				<view class="pay_code">
					<view class="alipay_code_main">
						<view class="alipay_code">
							<image :src="'http://gy.hyq.ink/' + orderDetails.pay_info.alipay_img" mode=""></image>
						</view>
						<view class="tips">
							支付宝
						</view>
					</view>
					<view class="wechat_code_main">
						<view class="wechat_code">
						</view>
						<view class="tips">
							微信
						</view>
					</view>
				</view>
			</view>
			<view class="transfer_upload boxshow">
				<view class="transfer_upload_title">
					转账截图
				</view>
				<view class="transfer_upload_center">
					<image src="../../../static/image/transfeUpload.png" mode=""></image>
				</view>
			</view>
			<view class="btns1">
				确认付款
			</view>
		</view>
		<view class="putaway_commodity" @touchmove.stop.prevent="moveHandle" v-show="dialogShow">
			<view class="putaway_commodity_main">
				<view class="putaway_commodity_explain" @click="handleShowDelDialog">
					确认要取消此订单吗?
				</view>
				<view class="putaway_commodity_btns">
					<text @click="handlePutawayCommodity">取消</text>
					<text @click="handleCancelOrder">确认</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import ShoppingCartCard from '@/components/ShoppingCart/ShoppingCartCard/index.vue'
	export default {
		data() {
			return {
				/** 弹框展示 */
				dialogShow: false,
				/** 订单详情 */
				orderDetails: {
					// 订单信息
					info: {},
					// 支付信息
					pay_info: {}
				}
			}
		},
		methods: {
			/** 获取订单详情 */
			getOrderDetails(id) {
				let parameter = {
					order_id: id
				};
				this.$post(this.api.getPaymentOrderDetails, parameter, 'post', { token: uni.getStorageSync('token') }).then((res) => {
					console.log(res)
					this.orderDetails = res.data;
				}).catch((err) => {
					console.log(err)
				})
			},
			/** 取消删除 */
			handlePutawayCommodity() {
				this.dialogShow = false;
			},
			/** 遮罩层穿透，阻止底部滑动 */
			moveHandle() {
				return;
			},
			/** 打开删除弹框 */
			handleShowDelDialog() {
				this.dialogShow = true;
			},
			/** 取消订单 */
			handleCancelOrder() {
				let parameter = {
					order_id: this.orderDetails.info.id
				};
				this.$post(this.api.cancelOrder, parameter, 'post', { token: uni.getStorageSync('token') }).then((res) => {
					uni.showToast({
						title: '订单取消成功',
						icon: 'none',
						duration: 3000,
						position: 'bottom'
					});
					/** 跳转至首页 */
					uni.navigateTo({
						url: '../../index/index'
					})
				}).catch((err) => {
					console.log(err)
				})
			}
		},
		components: {
			ShoppingCartCard
		},
		computed:{
		},
		onLoad(option) {
			this.getOrderDetails(option.id);
		},
	}
</script>

<style lang="less" scoped>
	@import "@/asset/less/base.less";
	.payment_main {
		padding: 30rpx 20rpx 0;
	}
	.cancel_order {
		text-align: center;
		font-size: 30rpx;
		color: #666;
		image {
			width: 33rpx;
			height: 38rpx;
			vertical-align: middle;
			margin-right: 15rpx;
		}
	}
	.personal_info {
		margin-top: 20rpx;
		padding: 33rpx 18rpx 21rpx;
		.back_info_title {
			padding-bottom: 49rpx;
			font-size: 30rpx;
			font-weight: 700;
		}
		.back_info_center {
			border-bottom: 1px solid #e5e5e5;
			li {
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
				padding: 0 18rpx 38rpx 6rpx;
			}
			li:last-child {
				padding-bottom: 33rpx;
			}
			li view {
				width: 100rpx;
				display: flex;
				justify-content: space-between;
			}
		}
	}
	.pay_code {
		padding: 44rpx 90rpx 0;
		display: flex;
		justify-content: space-between;
		text-align: center;
		.alipay_code, .wechat_code {
			width: 220rpx;
			height: 220rpx;
			border-radius: 10rpx;
			padding: 8rpx;
			box-sizing: border-box;
			background-color: #D2A967;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.tips {
			padding-top: 14rpx;
			font-size: 30rpx;
		}
	}
	.transfer_upload {
		margin: 20rpx 0 104rpx;
		padding: 30rpx 0 15rpx 30rpx;
		.transfer_upload_title {
			padding-bottom: 21rpx;
			font-size: 30rpx;
			font-weight: 700;
		}
	}
	.transfer_upload_center {
		text-align: center;
		image {
			width: 230rpx;
			height: 230rpx;
		}
	}
	.btns1 {
		margin: 0 40rpx 60rpx;
	}
	.shopping_cart {
		margin-top: 22rpx;
		border-radius: 10px;
		padding: 18rpx 18rpx 0rpx 18rpx;
		box-shadow: 0px 0px 20px #E8E8E8;
		.shopping_cart_commodity_info {
			display: flex;
			justify-content: space-between;
			padding-bottom: 22rpx;
			border-bottom: 1rpx solid #E5E5E5;
		}
		.commodity_image {
			margin-right: 20rpx;
			width: 240rpx;
			height: 170rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.commodity_synopsis {
			width: 100%;
			.commodity_title {
				min-height: 65rpx;
				padding-top: 8rpx;
				line-height: 36rpx;
				color: #2D2D2D;
				padding: 9rpx 23rpx 0 0;
				font-size: 30rpx;
				overflow: hidden;
				-webkit-line-clamp: 2;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}
		}
		.shopping_cart_timer_money {
			padding-top: 39rpx;
			.shopping_cart_money {
				font-size: 30rpx;
				float: right;
				padding-top: 8rpx;
			}
			.shopping_cart_timer {
				background-color: #FFF1D1;
				color: #D2A967;
				font-size: 24rpx;
				text-align: center;
				padding: 10rpx 12rpx;
				border-radius: 5rpx;
			}
		}
		.shopping_cart_btn {
			padding-top: 30rpx;
			height: 104rpx;
			box-sizing: border-box;
	        .shopping_cart_checked_btn {
				display: inline-block;
				image {
					width: 35rpx;
					height: 35rpx;
					vertical-align: middle;
				}
			}
			.shopping_cart_order_btn {
				float: right;
				text {
					font-size: 24rpx;
					text-align: center;
					border-radius: 5rpx;
					display: inline-block;
				}
				text:first-child {
					height: 46rpx;
					width: 136rpx;
					line-height: 46rpx;
					color: #999999;
					border: 1rpx solid #E5E5E5;
					margin-right: 20rpx;
				}
				text:last-child {
					color: #F4F5FA;
					height: 48rpx;
					width: 138rpx;
					line-height: 48rpx;
					background: linear-gradient(90deg, #CFA461 0%, #DCBB7E 100%);
				}
			}
		}
	}
	.putaway_commodity {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		z-index: 999;
		background: rgba(0, 0, 0, 0.5);
		.putaway_commodity_main {
			width: 632rpx;
			height: 290rpx;
			margin: 336rpx auto 0;
			text-align: center;
			border-radius: 5rpx;
			background-color: #fff;
			.putaway_commodity_explain {
				color: #000;
				font-size: 36rpx;
				padding: 73rpx 0 74rpx 0;
				text {
					color: #E84E4E;
				}
			}
			.putaway_commodity_btns {
				font-size: 30rpx;
				display: flex;
				justify-content: space-between;
				padding: 0 93rpx;
				text {
					border-radius: 5rpx;
					display: inline-block;
				}
				text:first-child {
					border: 2rpx solid #E5E5E5;
					width: 173rpx;
					height: 58rpx;
					line-height: 58rpx;
					color: #999;
				}
				text:last-child {
					width: 175rpx;
					height: 60rpx;
					line-height: 60rpx;
					color: #fff;
					background: linear-gradient(90deg, #CFA461 0%, #DCBB7E 100%);
				}
			}
		}
	}
</style>
